
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <title></title>

    <script src="{:jquery}"></script>
    <link href="{:bootstrap_min_css}" rel="stylesheet">
    <script src="{:bootstrap_min_js}"></script>

    <!--[if lt IE 9]>
    <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
    <![endif]-->


    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/tcplayer.min.css" rel="stylesheet"/>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/libs/hls.min.0.13.2m.js"></script>
    <!--播放器脚本文件-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/tcplayer.v4.3.0.min.js"></script>


    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .main-wrapper {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
        }
        .s8 .sb-list{
            width: 320px;
            border-right: 1px solid #eeeeee;
            height: 100%;
            box-shadow: -1px 0 5px rgba(0,0,0,.1);
            background-color: #ffffff;
            position: absolute;
            overflow-y: scroll;
        }
        .s8 .sb-content{
            margin-left: 320px;
            height: 100%;
        }
        .s8 .player-wrapper{
            padding: 20px;
            height: 100%;
            width: 100%;
        }
        .s8 .sb-title {
            height: 45px;
            line-height: 45px;
            border-bottom: #DDDDDD;
            box-shadow: -1px 0 5px rgba(0,0,0,.1);
        }

        .sb-content .top {
            position: fixed;
            top: 0;
            left: 318px;
            height: 50px;
            right: 0;
            background-color: #ffffff;
            border-bottom: 1px solid #888888;
        }

        .sb-content .center {
            position: fixed;
            top: 50px;
            left: 320px;
            bottom: 100px;
            right: 0;
        }

        .sb-content .bottom {
            position: absolute;
            height: 100px;
            width: 100%;
            bottom: 0;
        }
        .player-wrapper video{
            /*border: 1px solid #b1b1b1;*/
            background-color: #333333;
        }

        .top .title{
            border-left: 3px solid #50cc50;
            padding: 5px;
            margin-left: 10px;
            margin-top: 7px;
            font-size: 16px;
        }

        @media (max-width: 960px) {
            .sb-list{
                width: 100%!important;
            }
            .player-wrapper {
                position: fixed;
                left: 0;
                right: 0;
                height: 300px;
            }
            .sb-content .top{
                left: 0;
            }
            .s8 .player-wrapper{
                padding: 0;
            }
        }
        .mc-tag{
            font-size: 12px;
            padding: 2px 4px;
            background-color: #42c160;
            color: #ffffff;
        }

    </style>
</head>
<body>

<div class="main-wrapper s8">
    <div class="sb-list">
        <div>
            <a href="/" >IT学堂首页</a>
        </div>
        <ul class="list-group">
            {volist name="list" id="le" key="k" }
            <li class="list-group-item">
                <a href="/lesson/{$le.course_id}/{$le.id}">
                    <div>{$k} {$le.name}
                        {if $le.is_free==1 }
                        <span class="mc-tag">免费</span>
                        {/if}
                    </div>
                </a>
            </li>
            {/volist}
        </ul>
    </div>
    <div class="sb-content">
        <!--<div class="sb-title">
            课时：{$task.name}
        </div>
        <div class="player-wrapper">

        </div>-->
        <div class="top">
            <div class="title">{$le.name}</div>
        </div>
        <div class="center">
            <div class="player-wrapper">
                <video id="id_test_video" style="width:100%;height: 100%;"></video>
            </div>

        </div>
        <!--<div class="bottom"></div>
-->
    </div>
</div>

{if $is_own==0 && $is_free==0 }
<script>
    //alert('未拥有此课程');
    //location.href = '/course/{$lesson.course_id}/task';
    $('.player-wrapper').empty().html('<div>您未加入此课程的学习</div>');
</script>
{/if}

<script>
    (function(){
        var player = new TCPlayer('id_test_video', { // player-container-id 为播放器容器 ID，必须与 html 中一致
            //fileID: '387702293559253378', // 请传入需要播放的视频 fileID（必须）
            //appID: '1252460838', // 请传入点播账号的 appID（必须）
            //width:'100%',
            //height:'100%',
            //"m3u8": "http://1252460838.vod2.myqcloud.com/270b0551vodtranscq1252460838/eff94cbd387702293559253378/v.f100230.m3u8",
            //"poster" : "http://www.test.com/myimage.jpg",
        });


        function play(lessionId) {
            //获取课时的视频路径
            $.post('/lesson/video/url',{lessionId:lessionId},function (ret) {
                //player.src(data.url);
                ret = JSON.parse(ret);
                console.log(ret);
                if (ret.code == 0) {
                    player.src(ret.url);
                }
            });

        }

        play('{$lesson.id}');

    })();
    $(function () {
        function resizePlayerBox() {
            var pw = $('.player-wrapper');
            //pw.height(pw.width() / 16 * 9);
            var h = $(window).height()-120;
            console.log('h='+h)
            pw.height(h);
            console.log(pw.width())
            if ($(window).width() < 960) {
                $('.sb-list').css('top', pw.height() + 50);
            }else{
                $('.sb-list').css('top', '0');
            }

        }
        $(window).resize(resizePlayerBox);
        $(window).resize();
    });
</script>
</body>
</html>
